<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>

		<style>
			.box {
				width: 200px;
				height: 20px;
				border: 1px solid red;
			}
			.box:hover {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="elem">DIV1</div>
		<div id="elem-content">DIV2</div>
		<div class="box">鼠标移入获取当前元素</div>

		<ul>
			<li>The</li>
			<li>test</li>
		</ul>
		<ul>
			<li>has</li>
			<li>passed</li>
		</ul>

		<div class="d1">
			D1
			<div class="d2">
				D2
				<div class="d3">D3</div>
			</div>
		</div>

		<script>
			// 请不要使用以 id 命名的全局变量来访问元素，它会和声明的相同名称的变量冲突。
			elem.style.background = 'red'
			window['elem-content'].style.background = 'pink'

			// 通过 CSS 选择器来获取所匹配的元素: 1. document.querySelector 结果与 elem.querySelectorAll(css)[0] 相同；2. document.querySelectorAll。
			let li = document.querySelector('ul > li:last-child')
			console.log(li.innerHTML) // test

			let lis = document.querySelectorAll('ul > li:last-child')
			for (const li of lis) console.log(li.innerHTML) // test passed

			document.addEventListener('mousemove', function (event) {
				let hoveredElements = document.querySelectorAll('.box:hover')
				if (hoveredElements.length == 0) return
				console.log(hoveredElements[0]?.innerHTML)
			})

			// matches 检查当前元素是否与指定的 CSS 选择器匹配
			let div = document.querySelector('.box')
			console.log(div.matches('.box')) // true

			// closest 根据指定的 CSS 选择器查找，获取当前元素的任意一级的祖先元素。
			let d3 = document.querySelector('.d3')
			console.log(d3.closest('.d1'))
		</script>
	</body>
</html>
